<template>
  <div class="namelist">
    <div class="measure">
      <div class="measure-name">
        <div>考卷选择</div>
        <div>
          <a-input :style="{ width: '220px', background: '#fff' }" placeholder="请输入试卷名称" v-model="RefundReadForm.search"
            @change="inputname">
            <template #prefix>
              <icon-search />
            </template> </a-input><span class="oval-search-button">搜索</span>
        </div>
      </div>
    </div>
    <!-- v-if="!amination" -->
    <div class="Loading" v-if="!amination">
      <a-spin dot />
    </div>
    <div class="measure-test">

      <div class="test-paper" v-for="(item, index) in amination" :key="index">
        <div class="heightp">
          <img style="width: 12px; height: 12px" src="/img/bianzu.png" alt="" />
          &nbsp;
          <a-tooltip :content="item.DocName">
            <span>{{ item.DocName }}</span>
          </a-tooltip>
        </div>
        <!-- <a-tooltip :content="item.VideoName">
            <div class="testVideoName" style="padding: 0.5vw">
              {{ item.VideoName }}
            </div>
          </a-tooltip> -->
        <!-- <div class="startceshi">
         <p>共40题，218人做过</p> -->
        <!-- <p class="start" @click="starttestingist(item)">
            开始测试
          </p> </div>-->
        <a-button class="start" size="mini" @click="starttestingist(item)" type="primary">开始测试</a-button>

      </div>
    </div>
    <!-- <div class="pagination">     <a-pagination :total="total" show-total show-jumper show-page-size :current="ReadForm.pageNum" :page-size="ReadForm.pageSize" :page-size-options="[10, 20, 30, 50]" @change="pageNumChange" @page-size-change="pageSizeChange"/>
        <a-pagination :total="50" show-total show-jumper show-page-size/>
    </div> -->

    <div v-if="amination" style="
        display: flex;
        justify-content: center;
        align-items: center;
        /* 假设父容器高度为视口高度 */
      ">
      <a-space direction="vertical" :size="16" style="display: block; text-align: center">
        <a-row>
          <a-col :span="24">
            <a-pagination :total="total" show-total show-page-size :current="RefundReadForm.pageNum"
              :page-size="RefundReadForm.pageSize" @change="pageNumChange" @page-size-change="pageSizeChange" />
          </a-col>
        </a-row>
      </a-space>
    </div>
  </div>

  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 高一地理下学期期末AI学情诊断B卷 </template>
    <div class="modal-text">
      <div>本试卷难度0.56，总分150。共分为三</div>
      <div>一、单选题 (2分/每题，共20题)</div>
      <div>二、填空题（3分/每题，共12题）</div>
      <div>三、解答题 （6分/每题，共4题）</div>
    </div>
    <template #footer>
      <a-row justify="center">
        <a-col :span="6" style="text-align: center">
          <a-button class="question_icon" type="primary" @click="handleOk">确定</a-button>
        </a-col>
        <!-- <a-col :span="6" style="text-align: center">
              <a-button @click="handleCancel">关闭</a-button>
            </a-col> -->
      </a-row>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { RecordreturnRecordInfo } from "@/api/Examination";
// import {getStudentPage,apiindex,loginGetAreas} from "../../api/login"
// import useUserStore from '@/store/modules/user/index';
import useUserStore from "@/store/modules/user";
import { Message } from "@arco-design/web-vue";
import { getPermission } from "@/utils/subject";
const userStore = useUserStore();

const router = useRouter();
const subjectID = userStore.$state.subjectID;

const total = ref();
const visible = ref(false);
const amination = ref();
const starttesting = () => {
  visible.value = true;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};

const starttestingist = (e: any) => {

  if (!getPermission(userStore.$state.subjectID)) {
    // 替换为你的实际权限ID
    // 没有权限时显示提示
    Message.warning("您没有权限访问此内容，请联系管理员");
    return;
  }
  router.push({
    path: "/Measure/answerQuestions",
    query: {
      DocID: e.DocID,
      saveName: e.DocName,
      subjectID: RefundReadForm.subjectID,
      type: 3,
    },
  });
  // ksendForm.ids = e.SaveID;
  // ksendForm.subjectID = userStore.$state.subjectID;
  // // 发送试卷
  // postMyHomeworksendDoc(ksendForm).then((res: any) => {
  //   studentctrID.ctrID = res.list;
  //   ctrList();
  // });
};
// const ctrList = () => {
//   // 添加答题记录
//   postMyHomeworkstudent(studentctrID).then((res: any) => {
//     res.list.ctrID;
//     // router.push("/Measure/answerQuestions");
//     router.push({
//       path: "/Measure/answerQuestions",
//       query: {
//         textId: res.list.recordID,
//         ctrID: res.list.ctrID,
//         type: 1,
//       },
//     });
//   });
// };

const RefundReadForm = reactive({
  subjectID: 0, // 学科id
  search: "", // 关键字
  pageNum: 1, //页码
  pageSize: 10, //  显示条数
});

const turnRecord = () => {
  RecordreturnRecordInfo(RefundReadForm).then((res) => {
    total.value = res.count;
    amination.value = res.list;
  });
};
// 分页切换
const pageNumChange = (page: number) => {
  if (page !== 0) {
    RefundReadForm.pageNum = page;
    turnRecord();
  }
};
const pageSizeChange = (pageSize: number) => {
  RefundReadForm.pageNum = 1;
  RefundReadForm.pageSize = pageSize;
  // getPageData();
  turnRecord();
};
const inputname = (e: any) => {
  RefundReadForm.search = e
  turnRecord();
}
watch(
  () => userStore.$state.subjectID,
  async (newValue, oldValue) => {
    // console.log(`subjectID 发生变化：旧值 ${oldValue}，新值 ${newValue}`);
    try {
      if (newValue) {
        RefundReadForm.subjectID = newValue;
        await turnRecord();
      }

      // docsaveData.value = data;
    } catch (error) {
      console.error("获取数据出错:", error);
    }
  },
  { immediate: true }
);
onMounted(() => {
  if (subjectID) {
    RefundReadForm.subjectID = subjectID;
    // turnRecord();
  }
});
</script>
<style lang="less" scoped>
.heightp {
  // height: 7vh;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  // background-color: pink;
}

.namelist {
  background: #f7fbff;
  position: relative;
  width: 100%;
  height: 100%;
}

.measure-test {
  // width: 100%;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  /* 移除左右两侧的负边距 */
  //     margin-left: -10px;
  // margin-right: -10px;
}

.measure-test>* {
  /* 为子元素添加左右边距 */
  // margin-left: 24px;
  // flex-basis: calc(16.666% - 24px);
  box-sizing: border-box;
}

/* 利用伪元素来调整布局 */
.measure-test::after {
  content: "";
  /* 让伪元素占据剩余空间 */
  flex: 1 1 calc(16.666% - 20px);
  visibility: hidden;
  // margin-left: 10px;
  margin-right: 10px;
  // visibility: hidden;s
}

// .measure-test::after {
// content: "";
// flex: auto;
//         }
.measure {
  // width: 100%;
  height: 70px;
  background: #0075ff;
  border-radius: 8px;
  border-top: 1px solid #0075ff;
}

.measure-name {
  // width: 100%
  height: 70px;
  line-height: 70px;
  margin-top: 5px;
  padding: 0 24px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}

.oval-search-button {
  display: inline-block;
  padding: 0 16px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  background-color: #1890ff;
  /* 按钮背景色，可根据需要修改 */
  color: #fff;
  /* 按钮文字颜色，可根据需要修改 */
  cursor: pointer;
}

.test-paper {
  width: 16.5vw;
  min-height: 15vh;
  padding: 20px;
  // margin-right: 24px;
  font-weight: 500;
  font-size: 16px;
  color: #03305c;
  margin-bottom: 15px;
  background: #ffffff;

  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.startceshi {
  display: flex;
  margin-top: 45px;
  justify-content: space-between;
  font-size: 0.7vw;
  color: #8393a3;
}

.start {
  // font-size: 1vw;
  // text-align: right;
  float: right;
  cursor: pointer;
  // color: #0075ff;
  margin-top: 25px;
  // margin: 0 right;
  // float: right;
  // background-color: pink;
  // cursor: pointer;
  // text-align: right;
  // text-decoration: underline;
}

// 分页
.pagination {
  width: 550px;
  height: 30px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  // bottom: 20px;
  left: 30%;
}

.grid-dem {
  text-align: center;
  margin: 0 auto;
}

.modal-text {
  padding: 0 3vw;
  // text-align: center;
}

@media (max-width: 768px) {
  .test-paper {
    width: 268px;
    // height: 118px;
    padding: 20px;
    // margin-right: ;
    // margin-right: 24px;
    font-weight: 500;
    font-size: 16px;
    color: #03305c;
    margin-bottom: 15px;
    background: #ffffff;

    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
  }
}
</style>
